<template>
    <div class="container">
        <div class="header">
            <van-image fit="contain" src="/wxchat/images/yysh.png" />
            <div class="title">
                <span class="text">
                    预约记录
                </span>
            </div>
        </div>
        <div class="body">
            <van-cell-group v-for="item in list" title=" ">
                <van-cell title="窗口" :value="item.window" is-link clickable @click="addCarInfo(item.id)" />
                <van-cell title="开始时间" :label="item.start" />
                <van-cell title="结束时间" :label="item.end" />
            </van-cell-group>
            <van-button type="default" size="large" class="mt-5" @click="getData">显示更多</van-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Image as VanImage, Cell as VanCell, CellGroup as VanCellGroup, Button as VanButton, showToast} from 'vant';
import type { reservation } from '@/types/data'
import { getResverationApi } from '@/api/index'
import { useRoute } from 'vue-router'
import router from '@/router'

var route = useRoute()
var list = ref<reservation[]>()
var temp = [] as reservation[];

var pageIndex = 1
const getData = () => {
    let openid = route?.params.openid
    if (openid) {
        getResverationApi(openid as string, pageIndex).then(({ data }) => {
            if (data.length <= 0) { 
                showToast('没有更多啦');
            }
            else {
                temp = temp.concat(data)
                list.value = temp
                pageIndex++;
            }
        });
    }
    else {
        router.replace({
            name: '404'
        })
    }
}

onMounted(() => {
    pageIndex = 1;
    getData()
})

const addCarInfo=(id:string)=>{
    let openid = route?.params.openid
    if (openid) {
        router.push('/detail/'+openid)
    }
    else {
        router.replace({
            name: '404'
        })
    }
}
</script>
<style lang="scss" scoped>
.text-left {
    // font-size: 14pt;
    text-align: left;
}

.auto-width {
    width: auto;
}

.mt-5 {
    margin-top: 15px;
}
</style>